<!DOCTYPE html>
<html>
<head>
    <title>商品表-列表</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <!-- 所有的 css & js 资源 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="../../static/sa.css">
        <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
        <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
        <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
        <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
        <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
        <script src="../../static/sa.js"></script>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
        <!-- ------------- 检索参数 ------------- -->
        <div class="c-title">检索参数</div>
        <el-form ref="form" :model='p' @submit.native.prevent>
                    <sa-item type="num" name="记录id" v-model="p.id"></sa-item>
                    <sa-item type="text" name="商品名称" v-model="p.name"></sa-item>
                    <sa-item type="text" name="图文介绍" v-model="p.content"></sa-item>
                    <sa-item type="num" name="商品价格" v-model="p.money"></sa-item>
                        <sa-item name="所属分类">
                            <el-select v-model="p.typeId">
                                <el-option label="不限" value=""></el-option>
                                <el-option v-for="item in typeNameList" :label="item.name"
                                           :value="item.id" :key="item.id"></el-option>
                            </el-select>
                        </sa-item>
                    <sa-item type="num" name="剩余库存" v-model="p.stockCount"></sa-item>
                    <sa-item type="enum" name="商品状态" v-model="p.status"
                             :jv="{1: '上架', 2: '下架'}" jtype="2" def="不限"></sa-item>
            <el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询</el-button>
            <br/>
            <sa-item name="综合排序">
                <el-radio-group v-model="p.sortType" class="s-radio-text">
                    <el-radio :label="0">默认</el-radio>
                        <el-radio :label="1">记录id</el-radio>
                        <el-radio :label="2">商品名称</el-radio>
                        <el-radio :label="3">商品价格</el-radio>
                        <el-radio :label="4">所属分类</el-radio>
                        <el-radio :label="5">剩余库存</el-radio>
                        <el-radio :label="6">商品状态</el-radio>
                        <el-radio :label="7">创建日期</el-radio>
                        <el-radio :label="8">更新日期</el-radio>
                </el-radio-group>
            </sa-item>
        </el-form>
        <!-- ------------- 快捷按钮 ------------- -->
        <sa-item type="fast-btn" show="add,get,delete,export,reset"></sa-item>
        <!-- ------------- 数据列表 ------------- -->
        <el-table class="data-table" ref="data-table"
                  :data="dataList" >
            <sa-td type="selection"></sa-td>
                    <sa-td name="记录id" prop="id" type="num"></sa-td>
                    <sa-td name="商品名称" prop="name"></sa-td>
                    <sa-td name="商品头像" prop="avatar" type="img"></sa-td>
                    <sa-td name="轮播图片" prop="imageList" type="img-list"></sa-td>
                    <sa-td name="图文介绍" prop="content" type="richtext"></sa-td>
                    <sa-td name="商品价格" prop="money" type="num"></sa-td>
                    <sa-td name="所属分类" prop="typeName"></sa-td>
                    <sa-td name="剩余库存" prop="stockCount" type="num"></sa-td>
                    <sa-td name="商品状态" prop="status" type="enum" :jv="{1: '上架', 2: '下架'}"></sa-td>
                    <sa-td name="创建日期" prop="createTime" type="datetime"></sa-td>
                    <sa-td name="更新日期" prop="updateTime" type="datetime"></sa-td>
            <el-table-column label="操作"
                             fixed="right"  width="240px">
                <template slot-scope="s">
                    <el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">查看</el-button>
                    <el-button class="c-btn" type="primary" icon="el-icon-edit" @click="update(s.row)">修改</el-button>
                    <el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- ------------- 分页 ------------- -->
        <sa-item type="page" :curr.sync="p.pageNo" :size.sync="p.pageSize" :total="dataCount"
                 @change="f5()"></sa-item>
    </div>
</div>
<script>
    var app = new Vue({
        components: {
            "sa-item": httpVueLoader('../../jiuan-frame/com/sa-item.vue'),
            "sa-td": httpVueLoader('../../jiuan-frame/com/sa-td.vue'),
        },
        el: '.vue-box',
        data: {
            p: { // 查询参数
                id: '',		// 记录id
                name: '',		// 商品名称
                content: '',		// 图文介绍
                money: '',		// 商品价格
                typeId: '',		// 所属分类
                stockCount: '',		// 剩余库存
                status: '',		// 商品状态 (1=上架,2=下架)
                pageNo: 1,		// 当前页
                pageSize: 10,	// 页大小
                sortType: 0		// 排序方式
            },
            dataCount: 0,
            dataList: [], // 数据集合
            typeNameList: [],		// 所属分类 集合
        },
        methods: {
            // 刷新
            f5: function () {
                        sa.ajax('/SerGoods/getList', sa.removeNull(this.p), function (res) {
                            this.dataList = res.data; // 数据
                            this.dataCount = res.dataCount; // 数据总数
                            sa.f5TableHeight();		// 刷新表格高度
                        }.bind(this));
                    },
                // 查看
                get: function (data) {
                    sa.showIframe('数据详情', 'ser-goods-info.html?id=' + data.id, '1050px', '90%');
                }
            ,
                // 查看 - 根据选中的
                getBySelect: function (data) {
                    var selection = this.$refs['data-table'].selection;
                    if (selection.length == 0) {
                        return sa.msg('请选择一条数据')
                    }
                    this.get(selection[0]);
                }
            ,
                // 修改
                update: function (data) {
                    sa.showIframe('修改数据', 'ser-goods-add.html?id=' + data.id, '1000px', '90%');
                }
            ,
                // 新增
                add: function (data) {
                    sa.showIframe('新增数据', 'ser-goods-add.html?id=-1', '1000px', '90%');
                }
            ,
                // 删除
                del: function (data) {
                    sa.confirm('是否删除，此操作不可撤销', function () {
                        sa.ajax('/SerGoods/delete?id=' + data.id, function (res) {
                            sa.arrayDelete(this.dataList, data);
                            sa.ok('删除成功');
                            sa.f5TableHeight();		// 刷新表格高度
                        }.bind(this))
                    }.bind(this));
                }
            ,
                // 批量删除
                deleteByIds: function () {
                    // 获取选中元素的id列表
                    let selection = this.$refs['data-table'].selection;
                    let ids = sa.getArrayField(selection, 'id');
                    if (selection.length == 0) {
                        return sa.msg('请至少选择一条数据')
                    }
                    // 提交删除
                    sa.confirm('是否批量删除选中数据？此操作不可撤销', function () {
                        sa.ajax('/SerGoods/deleteByIds', {ids: ids.join(',')}, function (res) {
                            sa.arrayDelete(this.dataList, selection);
                            sa.ok('删除成功');
                            sa.f5TableHeight();		// 刷新表格高度
                        }.bind(this))
                    }.bind(this));
                }
            ,
            },
            created: function () {
                this.f5();
                sa.onInputEnter();

                // ------------- 加载所需外键列表 -------------
                // 加载 所属分类
                sa.ajax('/Type/getList?pageSize=1000', function (res) {
                    this.typeNameList = res.data; // 数据集合
                }.bind(this), {msg: null});
            }
        })
</script>
</body>
</html>
